<template>
  <div class="sde-root">
    <div id="editor" ref="editor" :style="{ width:width, height:height }" style="box-shadow: 0 0 0 1px #d1d1d1, 0 0 3px 1px #ccc;">
      <div contenteditable="false" class="sde-tmp-root" style="">
        <div contenteditable="false" class="sde-tmp-content">
          <div contenteditable="false" class="sde-tmp-content-value" style="text-align: center;" sde-contenteditable="true">
            <p>
              <strong><span style="font-family: 黑体, SimHei; font-size: 20px; text-decoration: none;">欢迎使用卡易智慧医疗-Web可视化报告系统</span></strong>
            </p>
            <p style="text-align: left;">
              <span style="font-family: 黑体, SimHei; text-decoration: none; font-size: 16px;">&nbsp;&nbsp;&nbsp;&nbsp;1.请点击工具栏中的新建模板进行制作模板，然后点击模板保存添加模板。</span><strong><span style="font-family: 黑体, SimHei; font-size: 20px; text-decoration: none;"><br></span></strong>
            </p>
            <p style="text-align: left;">
              <span style="font-family: 黑体, SimHei; text-decoration: none; font-size: 16px;">&nbsp;&nbsp;&nbsp;&nbsp;2.请在右侧选择需要修改的模板进行修改。</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import '../../../../static/sdeEditor/sde.config.js?t=88'
import '../../../../static/sdeEditor/ueditor/themes/default/css/ueditor.min.css'
import '../../../../static/sdeEditor/ueditor/ueditor.all.min.js'
import '../../../../static/sdeEditor/ueditor/lang/zh-cn/zh-cn.js'
import '../../../../static/sdeEditor/js/sde-ie8-design.js'

export default {
  name: 'SdeEditor',
  props: { // 编辑器的宽高取决于编辑器渲染节点本身的宽高
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      sde: null
    }
  },
  created() {
    console.log('sde components created.')
  },
  mounted() {
    // alert('新增扩展toolbar示例，详见sdeEditor.vue组件!');
    const that = this
    // eslint-disable-next-line no-undef
    this.sde = new SDE({
      el: this.$refs.editor,
      iframe_css_src: null, // string/Array数组 扩展css
      iframe_js_src: null, // string/Array数组 扩展js
      footer: '卡易智慧医疗',
      page_start_num: 1, // 页面起始页//默认为1
      print: {
        resettingPrint(opt, viewDom) {}, // 默认重置（包括首次设置）打印页面前触发。优先级高于render系列函数
        resetedPrint(opt, viewDom) {}, // 默认重置（包括首次设置）打印页面后触发。优先级高于render系列函数
        renderHeader(index, page) {
          return `<div style="line-height:55px;background:red;border:1px solid yellow;">这里是header</div>`
        }, // 返回要渲染的页眉。默认从零开始
        renderFooter(index, page) {
          return `<div style="line-height:35px;background:blue;border:1px solid green;"><center>第${index + 1}页<center></div>`
        }, // 返回要渲染的页脚。默认从零开始
        renderedHeader(index, count, page, header) {}, // 渲染后
        renderedFooter(index, count, page, footer) {}, // 渲染后
        scale: 2, // 放大比例，默认2倍，越大越清晰，相应的渲染也更慢
        autoPrint: true, // 是否默认打开pdfviewer即执行打印操作
        isDownload: false, // 是否下载，如果为true，则不再打开pdfviewer页面
        fileName: 'SDE 测试打印', // 如果isDownload=true时的pdf文件下载名称
        pageMode: 'A4', // 页面模式:A3|A4|A5 ……
        width: 794, // 以下默认值
        height: 1123,
        top: 72,
        right: 72,
        bottom: 72,
        left: 72,
        printMode: 'normal', // 打印模式：normal|neat|revise|comment
        ctrlMode: 'normal', // 控件模式：normal|hidden|remove
        printDirection: 'vertical', // 打印方向 vertical|horizontal
        printCssUrl: null, // 打印的样式表，可以是string，也可以是array
        printJsUrl: null // 打印的js，可以是string，也可以是array
      },
      ctrl_remote_handle: function (data) {
        // 这里可以处理url，对url进行再加工。比如重置data.url值
        // data.url='static/sdeEditor/'+data.url;
        return data
      },
      revise: false, // 是否启用修订
      mode: 'READONLY', // READONLY
      default_open_toolbar: 'sde-toolbar-editor', // 默认打开的toolbar的集合，如果不填，默认使用第一个集合
      toolbars: [{
        name: 'sde-toolbar-file',
        title: '文件',
        items: [{
          name: 'sde-toolbar-file-file',
          title: '文件管理',
          items: [
            {
              name: 'newModel',
              title: '新建模板', // 方式二：（推荐）
              render: function () {
                let div = document.createElement('div')
                div.innerHTML = `<div class="panel-content-ctrl" title="新建模板" >
            <div class="sde-icon sde-icon-openxml" style="width: 40px; height: 32px; float: none;"></div>
            <div style="text-align: center;">新建模板</div>
          </div>`
                div = div.firstElementChild
                div.addEventListener('click', () => {
                  that.$emit('addNewModel')
                })
                return div
              }
            }, {
              name: 'openxml',
              title: '打开XML'
            }, {
              name: 'importxml',
              title: '下载XML'
            }]
        }, {
          name: 'test',
          title: '文档操作',
          items: [{
            name: 'modelSave',
            title: '模板保存', // 方式二：（推荐）
            render: function () {
              let div = document.createElement('div')
              div.innerHTML = `<div class="panel-content-ctrl" title="模板保存" >
            <div class="sde-icon sde-icon-openxml" style="width: 40px; height: 32px; float: none;"></div>
            <div style="text-align: center;">模板保存</div>
          </div>`
              div = div.firstElementChild
              div.addEventListener('click', () => {
                that.$emit('saveModel')
              })
              return div
            }
          },
          {
            name: 'modelExport',
            title: '模板导出', // 方式二：（推荐）
            render: function () {
              let div = document.createElement('div')
              div.innerHTML = `<div class="panel-content-ctrl" title="模板导出" >
            <div class="sde-icon sde-icon-openxml" style="width: 40px; height: 32px; float: none;"></div>
            <div style="text-align: center;">模板导出</div>
          </div>`
              div = div.firstElementChild
              div.addEventListener('click', () => {
                that.$emit('exportModel')
              })
              return div
            }
          }]
        }]
      }, {
        name: 'sde-toolbar-editor',
        title: '编辑',
        items: [{
          name: 'sde-toolbar-editor-history',
          title: '历史记录',
          items: [{
            name: 'drafts',
            title: '草稿箱'
          }, {
            name: 'undo',
            title: '撤销'
          }, '|', {
            name: 'redo',
            title: '恢复'
          }]
        }, {
          name: 'sde-toolbar-editor-clipboard',
          title: '剪切板',
          items: [{
            name: 'paste',
            title: '粘贴'
          }, {
            name: 'copy',
            title: '复制'
          }, '|', {
            name: 'cut',
            title: '剪切'
          }]
        }, {
          name: 'sde-toolbar-editor-fonts',
          title: '字体',
          items: [{
            name: 'fontfamily',
            title: '字体'
          }, {
            name: 'removeformat',
            title: '清除格式'
          }, {
            name: 'autotypeset',
            title: '自动格式化'
          }, {
            name: 'formatmatch',
            title: '格式刷'
          }, '|', {
            name: 'fontsize',
            title: '字号'
          }, {
            name: 'upsize',
            title: '增大字体'
          }, {
            name: 'downsize',
            title: '缩小字体'
          }, {
            name: 'subscript',
            title: '上标'
          }, {
            name: 'superscript',
            title: '下标'
          }, {
            name: 'bold',
            title: '加粗'
          }, {
            name: 'italic',
            title: '倾斜'
          }, {
            name: 'underline',
            title: '下划线'
          }, {
            name: 'strikethrough',
            title: '删除线'
          }, {
            name: 'forecolor',
            title: '文字颜色'
          }, {
            name: 'backcolor',
            title: '背景颜色'
          }]
        }, {
          name: 'sde-toolbar-editor-paragraphs',
          title: '段落',
          items: [{
            name: 'justifyleft',
            title: '向左对齐'
          }, {
            name: 'justifycenter',
            title: '居中对齐'
          }, {
            name: 'justifyright',
            title: '向右对齐'
          }, {
            name: 'justifyjustify',
            title: '两端对齐'
          }, {
            name: 'blockquote',
            title: '引用'
          }, {
            name: 'blockindent',
            title: '增加缩进'
          }, {
            name: 'blockoutdent',
            title: '减小缩进'
          }, '|', {
            name: 'unorderedlist',
            title: '无序编号'
          }, {
            name: 'orderedlist',
            title: '有序编号'
          }, {
            name: 'rowspacingtop',
            title: '段前距'
          }, {
            name: 'rowspacingbottom',
            title: '段后距'
          }, {
            name: 'lineheight',
            title: '行高'
          }]
        }]
      }, {
        name: 'sde-toolbar-insert',
        title: '插入',
        items: [{
          name: 'sde-toolbar-insert-pagebreak',
          title: '分页符',
          items: [{
            name: 'pagebreak',
            title: '分页符'
          }]
        }, {
          name: 'sde-toolbar-insert-spechars',
          title: '字符',
          items: [{
            name: 'spechars',
            title: '字符'
          }]
        }, {
          name: 'sde-toolbar-insert-links',
          title: '链接',
          items: [{
            name: 'insertlink',
            title: '添加链接'
          }, '|', {
            name: 'unlink',
            title: '取消链接'
          }]
        }, {
          name: 'sde-toolbar-insert-images',
          title: '图片',
          items: [/* {
            name: 'insertimage',
            title: '图片管理'
          }, {
            name: 'simpleupload',
            title: '插入'
          },  */{
              name: 'emotion',
              title: '表情'
            }, {
              name: 'vectordiagram',
              title: '矢量图'
            }, '|', {
              name: 'snapscreen',
              title: '截屏'
            }, {
              name: 'scrawl',
              title: '涂鸦'
            },
            {
              name: 'qrcode',
              title: '二维码'
            }]
        }, {
          name: 'sde-toolbar-insert-map',
          title: '地图',
          items: [{
            name: 'map',
            title: '地图'
          }]
        }, {
          name: 'sde-toolbar-insert-insertcode',
          title: '代码',
          items: [{
            name: 'insertcode',
            title: '代码'
          }]
        }, {
          name: 'sde-toolbar-insert-table',
          title: '表格',
          items: [{
            name: 'inserttable',
            title: '表格'
          }]
        }, {
          name: 'sde-toolbar-insert-kityformula',
          title: '公式',
          items: [{
            name: 'kityformula',
            title: '公式'
          }]
        }, {
          name: 'sde-toolbar-insert-blockcomment',
          title: '批注',
          items: [{
            name: 'blockcomment',
            title: '批注'
          }]
        }]
      }, {
        name: 'sde-toolbar-table',
        title: '表格',
        items: [{
          name: 'sde-toolbar-table-table',
          title: '表格',
          items: [{
            name: 'inserttable',
            title: '插入表格'
          }, {
            name: 'deletetable',
            title: '删除表格'
          }, {
            name: 'insertrow',
            title: '插入行'
          }, {
            name: 'insertcol',
            title: '插入列'
          }, '|', {
            name: 'deleterow',
            title: '删除行'
          }, {
            name: 'deletecol',
            title: '删除列'
          }]
        }, {
          name: 'sde-toolbar-table-merge',
          title: '合并单元格',
          items: [{
            name: 'mergecells',
            title: '合并单元格'
          }, {
            name: 'mergedown',
            title: '向下合并单元格'
          }, {
            name: 'mergeright',
            title: '向右合并单元格'
          }, '|', {
            name: 'splittocells',
            title: '拆分单元格'
          }, {
            name: 'splittocols',
            title: '单元格拆分成列'
          }, {
            name: 'splittorows',
            title: '单元格拆分成行'
          }]
        }, {
          name: 'sde-toolbar-table-alignmerge',
          title: '对齐方向',
          items: [{
            name: 'valign-top',
            title: '顶端对齐'
          }, {
            name: 'valign-middle',
            title: '垂直居中'
          }, {
            name: 'valign-bottom',
            title: '底端对齐'
          }, '|', {
            name: 'align-left',
            title: '左对齐'
          }, {
            name: 'align-center',
            title: '居中'
          }, {
            name: 'align-right',
            title: '右对齐'
          }]
        }, {
          name: 'sde-toolbar-table-style',
          title: '表格线样式',
          items: [{
            name: 'tablestyle',
            title: '表格样式',
            items: [{
              title: '隐藏表格线',
              name: 'tb-hide' // 这里是具体的样式
            },
            {
              title: '设为实线',
              name: 'tb-solid'
            },
            {
              title: '设为虚线',
              name: 'tb-dotted'
            }
            ]
          }, {
            name: 'tablelowerframeline',
            title: '下框线'
          }, {
            name: 'tableupperframeline',
            title: '上框线'
          }, {
            name: 'tableleftframeline',
            title: '左框线'
          }, {
            name: 'tablerightframeline',
            title: '右框线'
          }, {
            name: 'tablenoborder',
            title: '无框线'
          }, '|', {
            name: 'tableinternaltransverseline',
            title: '内部横线'
          }, {
            name: 'tableinternalverticalline',
            title: '内部竖线'
          }, {
            name: 'tableinsideborder',
            title: '内部框线'
          }, {
            name: 'tablelateralframeline',
            title: '外侧框线'
          }, {
            name: 'tableallframelines',
            title: '所有框线'
          }]
        }]
      }, {
        name: 'sde-toolbar-views',
        title: '视图',
        items: [{
          name: 'sde-toolbar-views-directory',
          title: '目录',
          items: [{
            name: 'directory',
            title: '显示目录'
          }]
        }, {
          name: 'sde-toolbar-views-comment',
          title: '批注',
          items: [{
            name: 'showcomment',
            title: '显示批注'
          }]
        }, {
          name: 'sde-toolbar-views-revise',
          title: '修订',
          items: [{
            name: 'revise',
            title: '修订'
          }]
        }, {
          name: 'sde-toolbar-views-preview',
          title: '预览文档',
          items: [{
            name: 'preview',
            title: '预览文档'
          }]
        }]
      }, {
        name: 'sde-toolbar-tools',
        title: '工具',
        items: [{
          name: 'sde-toolbar-tools-drafts',
          title: '草稿箱',
          items: [{
            name: 'drafts',
            title: '草稿箱'
          }]
        }, {
          name: 'sde-toolbar-tools-print',
          title: '打印',
          items: [{
            name: 'print',
            title: '打印'
          } /* {
            name: 'seniorprint',
            title: '高级打印'
          } */]
        }, {
          name: 'sde-toolbar-tools-search',
          title: '搜索',
          items: [{
            name: 'searchreplace',
            title: '查找替换'
          }]
        }, {
          name: 'sde-toolbar-tools-wordcount',
          title: '字数统计',
          items: [{
            name: 'wordcount',
            title: '字数统计'
          }]
        }]
      }, {
        name: 'sde-toolbar-controls',
        title: '病历控件',
        items: [{
          name: 'sde-toolbar-controls-sdetemplate',
          title: '控件库',
          items: [{
            name: 'sdetemplate',
            title: '控件库'
          }]
        }, {
          name: 'sde-toolbar-controls-controls',
          title: '新增控件',
          items: [{
            name: 'sdectrllabel',
            title: '标签控件'
          }, {
            name: 'sdectrltext',
            title: '单行文本'
          }, {
            name: 'sdectrlsection',
            title: '文档段'
          }, {
            name: 'sdectrlsummary',
            title: '文档节'
          }, '|', {
            name: 'sdectrlselect',
            title: '下拉选择'
          }, {
            name: 'sdectrldate',
            title: '日期控件'
          }, {
            name: 'sdectrlradio',
            title: '单选框'
          }, {
            name: 'sdectrlcbx',
            title: '复选框'
          }]
        }
        // {
        //   name: 'sde-toolbar-controls-sdemode',
        //   title: '模式设置',
        //   items: [{
        //     name: 'sdemode',
        //     title: '模式设置'
        //   }]
        // }
        ]
      }]
    })
    this.sde.addListener('ready', function () {
    //   let node = document.getElementById('editor')
    //   node.lastElementChild.className = 'autoWidth'
      let panels = document.getElementsByName('sde-toolbar-controls-controls')
      for (const p of panels) {
        p.className += ' not-allow'
      }
      /* let imgPanels = document.getElementsByName('sde-toolbar-insert-images')
      for (const ip of imgPanels) {
        ip.className += ' not-allow'
      } */
    })
    this.sde.addListener('headerfooteropen', function () {
      console.log(this)
      console.log('design headerfooteropen ok!')
    })

    this.sde.addListener('beforerender', function () {
      console.log('beforerender ok!')
    })
    this.sde.addListener('rendered', function () {
      console.log(arguments)
      console.log('rendered ok!')
    })
    this.sde.addListener('click', function () {
      console.log(arguments)
      console.log('click ok!')
    })
    this.sde.addListener('valuechange', function () {
      console.log(arguments)
      console.log('valuechange ok!')
    })

    this.sde.addListener('contentchange', function () {
      console.log('contentchange ok!')
    })
    this.sde.addListener('ctrlchange', function () {
      console.log('ctrlchange', arguments)
    })
    this.sde.addListener('selectionchange', function () {
      console.log('selectionchange', arguments)
    })
    // todo 这里可以尝试调用this.sde的各种方法
    // let node = document.getElementsByName('sdectrlsection')[0]
    // node.addEventListener('click', (e) => {
    //   let dialog = this.sde.getDialog({
    //     title: '文档段',
    //     name: 'section-dialogs',
    //     url: '../../../../static/sdeEditor/dialogs/section/index.html', // 如果不带有http，则为相对路径比如 'text/index.html'//这个就是文本控件维护
    //     style: 'width:600px;height:500px',
    //     buttons: [{
    //       className: 'edui-okbutton',
    //       label: '确定',
    //       onclick: function (e) {
    //         dialog.close(true)
    //       }
    //     },
    //     {
    //       className: 'edui-cancelbutton',
    //       label: '取消',
    //       onclick: function () {
    //         dialog.close(false)
    //       }
    //     }
    //     ]
    //   })
    //   dialog.open()
    // })
    /* this.sde.createListener('addSectionCtrl', (e) => {
      console.log('触发了addSectionCtrl')
      this.sde.insertControl(e)
    }) */
    /* document.addEventListener('addSectionCtrl', (e) => {
      console.log('触发了addSectionCtrl')
      this.sde.insertControl(e)
    }) */
  },
  beforeDestroy() {
    this.sde.destroy()
  },
  methods: {
    execCommand() {
      return this.sde.execCommand.apply(this.sde, arguments)
    },
    mode(mode) {
      if (mode) {
        this.sde.mode(mode)
        let panels = document.getElementsByName('sde-toolbar-controls-controls')
        for (const p of panels) {
          if (mode === 'DESIGN' && p.className.indexOf('not-allow') > -1) {
            p.className = p.className.replace(' not-allow', '')
          } else if (mode !== 'DESIGN' && p.className.indexOf('not-allow') === -1) {
            p.className += ' not-allow'
          }
        }
      } else {
        return this.sde.mode()
      }
    },
    getHTML() {
      return this.sde.html()
    },
    setHTML(html) {
      this.sde.html(html)
    }
  }
}
</script>
<style lang='scss' scoped>
    .sde-root{
        width: 100%;
    }
    /deep/ .autoWidth{
        width: auto !important;
    }
    /deep/ .not-allow{
        color: #a0a0a0;
        // cursor: not-allowed;
        pointer-events: none;
    }
</style>
